<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>双指缩放</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
#container{
	width:100vw;
	height: 100vh;
}
        canvas {
            display: block;
        }

    </style>
</head>
<body >
<div id="container"></div>
</body>
		<script src="./js/three.min.js"></script>
		<script src="./js/OrbitControls.js"></script>
<script>
	window.onload=draw;
    var renderer, camera, scene, ambientLight, directionalLight, control;
   
   var texture_placeholder, isUserInteracting = false,
       onMouseDownMouseX = 0,
       onMouseDownMouseY = 0,
       lon = 90,
       onMouseDownLon = 0,
       lat = 0,
       onMouseDownLat = 0,
       phi = 0,
       theta = 0,
       target = new THREE.Vector3(),
       onPointerDownPointerX,
       onPointerDownPointerY,
       onPointerDownLon,
       onPointerDownLat;
	   var offsetPostion;
	   var rotateAngel = IsPC() ? 180 : 90;
	   
	   
 const radius = 50 // 球体半径
	
	
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        // renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.setSize(document.getElementById("container").clientWidth, document.getElementById("container").clientHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
		document.getElementById("container").appendChild(renderer.domElement);
        // document.body.appendChild(renderer.domElement);
    }

    function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.lookAt(new THREE.Vector3(radius, 0, 0));

    }

    function initScene() {
        scene = new THREE.Scene();
    }


    function initLight() {
        ambientLight = new THREE.AmbientLight("#111111");
        scene.add(ambientLight);

        directionalLight = new THREE.DirectionalLight("#ffffff");
        directionalLight.position.set(40, 60, 10);

        directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
        directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
        directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
        directionalLight.shadow.camera.right = 50; //最右边
        directionalLight.shadow.camera.top = 50; //最上边
        directionalLight.shadow.camera.bottom = -50; //最下面

        //这两个值决定生成阴影密度 默认512
        directionalLight.shadow.mapSize.height = 1024;
        directionalLight.shadow.mapSize.width = 1024;

        //告诉平行光需要开启阴影投射
        directionalLight.castShadow = true;

        scene.add(directionalLight);
		
		//添加户外光源
		hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 1);
		scene.add(hemisphereLight);
    }



	function initRoom(){
			// 全景场景
	geometry = new THREE.SphereGeometry(500, 60, 60);
	// 按z轴翻转
	geometry.scale(1, 1, -1);
	// 添加贴图
	outside_low = new THREE.MeshBasicMaterial({
	  map: new THREE.TextureLoader().load('./img/test.jpg')
	});
	/* inside_low = new THREE.MeshBasicMaterial({
	  map: new THREE.TextureLoader().load('./img/room/苏州城夜景.jpg')
	}); */
	mesh = new THREE.Mesh(geometry, outside_low);
	/* //异步加载高清纹理图
	new THREE.TextureLoader().load('./img/room/dengyinchao.jpeg', texture => {
	  outside = new THREE.MeshBasicMaterial({ map: texture });
	  mesh.material = outside;
	}); */
	scene.add(mesh);
    camera.fov = 100;
    camera.updateProjectionMatrix()
	}
	

	


    function initControl() {

        control = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function render() {

        control.update();

        renderer.render(scene, camera);
    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        requestAnimationFrame(animate);
		lat = Math.max( - 85, Math.min(85, lat));
		phi = THREE.MathUtils.degToRad(rotateAngel - lat);
		theta = THREE.MathUtils.degToRad(lon);
		target.x = radius * Math.sin(phi) * Math.cos(theta);
		target.y = radius * Math.cos(phi);
		target.z = radius * Math.sin(phi) * Math.sin(theta);
		camera.lookAt(target);
		renderer.render(scene, camera)
    }

    function draw() {
        initRender();
        initScene();
        initCamera();
        initRoom()
				
        initControl();

        animate();
		
		window.onresize = onWindowResize;
		
		var a;
		a = document.getElementById("container");
		a.addEventListener("touchstart", onDocumentTouchStart, false);
		a.addEventListener("touchmove", onDocumentTouchMove, false);

    }
	function onDocumentTouchStart(a) {
	    a.preventDefault();
	    if (a.touches.length == 1) {
	        onPointerDownPointerX = a.touches[0].pageX;
	        onPointerDownPointerY = a.touches[0].pageY;
	        onPointerDownLon = lon;
	        onPointerDownLat = lat
	    } else {
	        if (a.touches.length == 2) {
	            offsetPostion = getDistance({
	                    x: a.touches[0].pageX,
	                    y: a.touches[0].pageY
	                },
	                {
	                    x: a.touches[1].pageX,
	                    y: a.touches[1].pageY
	                })
	        }
	    }
	}
	
	function onDocumentTouchMove(c) {
	    c.preventDefault();
	    if (c.touches.length == 1) {

	        lon = (onPointerDownPointerX - c.touches[0].pageX) * 0.1 + onPointerDownLon;
	        lat = (c.touches[0].pageY - onPointerDownPointerY) * 0.1 + onPointerDownLat
	    } else {
	        if (c.touches.length == 2) {
	            var a = getDistance({
	                    x: c.touches[0].pageX,
	                    y: c.touches[0].pageY
	                },
	                {
	                    x: c.touches[1].pageX,
	                    y: c.touches[1].pageY
	                });
	            camera.fov += (offsetPostion - a) * 0.01;
	            if (camera.fov > 110) {
	                camera.fov = 110
	            } else {
	                if (camera.fov < 30) {
	                    camera.fov = 30
	                }
	            }
	            camera.updateProjectionMatrix()
	        }
	    }
	}	
	function getDistance(d, c) {
	    var a = c.x - d.x;
	    var b = c.y - d.y;
	    return Math.pow((a * a + b * b), 0.5)
	}
	
	function IsPC() {
	    var a = navigator.userAgent;
	    var d = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
	    var b = true;
	    for (var c = 0; c < d.length; c++) {
	        if (a.indexOf(d[c]) > 0) {
	            b = false;
	            break
	        }
	    }
	    return b
	}
</script>
</html>